const filters = document.querySelector(".gallery-filter");
const items = document.querySelectorAll(".filter-item");
const thumbnails = document.querySelectorAll(".thumbnail");

items.forEach(item => {
    item.addEventListener("click", (e) => {
        //实现导航栏跳转
        items.forEach(item => {
            item.classList.remove("active")
        })
        item.classList.add("active")
        //实现根据导航栏过滤效果
        let filterItem = e.target.getAttribute("data-filter")
        thumbnails.forEach(thumbnail => {
            thumbnail.style.display = "block"
            if (filterItem == "all") {
                thumbnail.style.display = "block"
            } else if (!thumbnail.className.includes(filterItem)) {
                thumbnail.style.display = "none"
            }
        })
    })
});